<template>
  <div class="step-content">
    <div class="complete-icon">
      <i class="el-icon-circle-check"></i>
    </div>
    <h3>新手指引完成！</h3>
    <p>您现在可以开始使用智慧养老服务平台</p>

    <IdentityFeatureCard
        :title="`${identityText}功能`"
        :features="identityFeatures"
    />

    <div class="privacy-agreement">
      <!-- 使用 agreedToPrivacy 属性 -->
      <el-checkbox
          :model-value="agreedToPrivacy"
          @update:model-value="$emit('update:agreedToPrivacy', $event)"
      >
        我已阅读并同意<a href="#" @click.stop="showPrivacy">《隐私政策》</a>
      </el-checkbox>
    </div>

    <p class="warning">注意：身份选择后不可修改，请确认您的身份为：{{ identityText }}</p>

    <div class="step-buttons">
      <el-button @click="$emit('prev')">上一步</el-button>
      <el-button
          type="primary"
          @click="$emit('complete')"
          :disabled="!agreedToPrivacy"
      >
        开始使用
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import IdentityFeatureCard from '@/views/Guide/components/IdentityFeatureCard.vue'

// 接收 props - 统一使用 agreedToPrivacy 属性
const props = defineProps({
  identityText: String,
  identityFeatures: Array,
  agreedToPrivacy: Boolean  // 使用统一的属性名
})

// 定义可发射的事件
const emit = defineEmits([
  'prev',
  'complete',
  'show-privacy',
  'update:agreedToPrivacy'  // 更新隐私协议状态的事件
])

// 触发隐私协议弹窗
function showPrivacy() {
  emit('show-privacy')
}
</script>

<style scoped>
.step-content {
  text-align: center;
  padding: 30px;
}

.complete-icon {
  font-size: 80px;
  color: #67C23A;
  margin-bottom: 20px;
}

h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}

p {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.privacy-agreement {
  margin: 30px 0;
  text-align: center;
}

.privacy-agreement a {
  color: #409EFF;
  text-decoration: none;
  margin-left: 5px;
}

.privacy-agreement a:hover {
  text-decoration: underline;
}

.warning {
  color: #E6A23C;
  margin: 20px 0;
  padding: 10px;
  background-color: #fdf6ec;
  border-radius: 4px;
  font-size: 14px;
}

.step-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.step-buttons .el-button {
  min-width: 120px;
}
</style>